<script setup lang='ts' name="member-equity">
import type { VxeGridInstance, VxeGridListeners, VxeTableEvents, VxeTableInstance } from 'vxe-table'

import { deleteEquity, memberEquity, updateEquityStatus } from '@fl/api/anjutong'
import ButtonItem from '@fl/components/button-item.vue'
import { ElButton, ElCard } from 'element-plus'
import { useRouter } from 'vue-router'

import type { IRowV0 } from './types'

import addItem from './component/add.vue'
import { useForm } from './hooks/use-form'
import { useTable } from './hooks/use-table'

const router = useRouter()

const { btns, gridOptions } = useTable()
const { form, schema } = useForm()
const tableRef = ref<VxeTableInstance<IRowV0>>()
const addDialog = ref(false)
const detail = ref<any>({})
const addItemRef = ref()
const xGrid = ref<VxeGridInstance<IRowV0>>()
const gridEvents: VxeGridListeners<IRowV0> = {
    pageChange({ currentPage, pageSize }) {
        if (gridOptions.pagerConfig) {
            gridOptions.pagerConfig.currentPage = currentPage
            gridOptions.pagerConfig.pageSize = pageSize
        }
        getData()
    },
}
getData()

async function getData() {
    gridOptions.loading = true
    const options: any = {
        ...form.value,
        page: gridOptions.pagerConfig.currentPage,
        size: gridOptions.pagerConfig.pageSize,
    }
    memberEquity(options).then((res: any) => {
        console.log(res, 'resresresres')
        gridOptions.pagerConfig.total = res.total ?? 0
        gridOptions.data = res?.records ?? []
        gridOptions.loading = false
    })
}

function reset() {
    form.value = {
        name: '',
        type: '',
    }
    getData()
}

function doAction(item: any, row: any) {
    if (item.value === 'edit') {
        detail.value = row
        addDialog.value = true
        router.push({ path: '/member-center/member/editEquity', query: detail.value })
    }

    else {
        deleteEquity(row.id).then(() => {
            getData()
        })
    }
}

function doAdd() {
    router.push('/member-center/member/addEquity')
}

const selectAllChangeEvent: VxeTableEvents.CheckboxAll<IRowV0> = ({ checked }) => {
    const $table = tableRef.value
    if ($table) {
        const records = $table.getCheckboxRecords()
        console.log(checked ? '所有勾选事件' : '所有取消事件', records)
    }
}

const selectChangeEvent: VxeTableEvents.CheckboxChange<IRowV0> = ({ checked }) => {
    const $table = tableRef.value
    if ($table) {
        const records = $table.getCheckboxRecords()
        console.log(checked ? '勾选事件' : '取消事件', records)
    }
}
const switchStatus = computed(() => (data: any) => {
    console.log(data, 'switchStatus')
    if (data === 1)
        return true

    else
        return false
})
function changeStatus(row: any) {
    console.log(row, 'changeStatus')
    updateEquityStatus(row.id).then(() => {
        getData()
    })
}

function search() {
    if (gridOptions.pagerConfig)
        gridOptions.pagerConfig.currentPage = 1
    getData()
}
</script>

<template>
    <template v-if="!addDialog">
        <ElCard class="mb-20">
            <PlusForm v-model="form"
                      :row-props="{ gutter: 20 }"
                      :columns="schema"
                      :col-props="{
                          span: 16,
                      }"
                      justify-between
                      style="display: flex;"
            >
                <template #footer>
                    <div class="ml-auto">
                        <ElButton type="primary"
                                  @click="search"
                        >
                            查询
                        </ElButton>

                        <ElButton @click="reset">
                            重置
                        </ElButton>
                    </div>
                </template>
            </PlusForm>
        </ElCard>

        <ElCard>
            <div class="mb-20 text-right">
                <ElButton type="primary"
                          @click="doAdd"
                >
                    新建
                </ElButton>
            </div>
            <!-- 列表 -->
            <vxe-grid ref="xGrid"
                      v-bind="gridOptions"
                      v-on="gridEvents"
                      @checkbox-all="selectAllChangeEvent"
                      @checkbox-change="selectChangeEvent"
            >
                >
                <template #status="{ row }">
                    <div style="cursor: pointer;">
                        <el-switch :model-value="switchStatus(row.status)"
                                   @click="changeStatus(row)"
                        />
                    </div>
                </template>

                <template #img="{ row }">
                    <div style="cursor: pointer;border-radius: 50%;"
                         h-30
                         w-30
                    >
                        <img :src="row.logo"
                             style="width: 100%;height: 100%;"
                             alt=""
                        >
                    </div>
                </template>

                <template #operate="{ row }">
                    <ButtonItem :btns="btns"
                                @btn-click="doAction($event, row)"
                    />
                </template>
            </vxe-grid>
        </ElCard>
    </template>

    <addItem v-else
             ref="addItemRef"
             :data="detail"
             @confirm="getData"
    />
</template>

    <style lang="scss" scoped>
        :deep(.el-row) {
    width: 80%;
}
</style>
